<template>
  <div class="box" @click="$emit('myclick')">
    <div class="head">
      <van-image
        round
        width="30px"
        height="30px"
        src="https://ts1.cn.mm.bing.net/th?id=OIP-C.VnqbqHI999-VVVkUOWBcMwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
      />
      <div class="name">
        <div class="ccc">{{ item.stem }}</div>
        <div class="description">
          <span>{{ item.creator }}</span>
          &zwnj;
          <span>|</span>
          &zwnj;
          <span>{{ item.createdAt }}</span>
        </div>
      </div>
    </div>
    <div>
      <p>
        {{ item.content }}
      </p>
    </div>
    <div class="bottom">
      <span>点赞</span>
      &zwnj;
      <span>{{ item.likeCount }}</span>
      &zwnj;
      <span>|</span>
      &zwnj;
      <span>浏览</span>
      &zwnj;
      <span>{{ item.views }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "HmContent",
  props: {
    item: {},
  },
};
</script>

<style lang="less" scoped>
.box {
  margin: 15px;
  padding-bottom: 10px;
  border-bottom: #6666 1px solid;

  .head {
    display: flex;
    align-items: center;

    .name {
      margin-left: 25px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 35px;
      .ccc {
        overflow: hidden;

        text-overflow: ellipsis;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
      .description {
        font-size: 9px;
        color: #999;
      }
    }
  }
  .text {
    font-size: 13px;
  }
  p {
    font-size: 12px;
    line-height: 1.5;
    margin: 10px 0;
    text-indent: 2em;
    color: #666;
    text-align: justify;
    // 超出2行省略号
    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .bottom {
    font-size: 10px;
    color: #999;
  }
}
</style>
